<template>
	<view class="search-doctor">
		<view class="search-doctor-input">
			<text class="iconfont icon-icon_sousuo"></text>
		   <input type="text" v-model="name" @confirm="getSearchdoctor">
		   <text>取消</text>
		</view>
		
		<view class="ai">
			<view>
				
				<text class="iconfont icon-jiqiren1"></text>
			    <text>智能导诊</text>
			</view>
			
			<text>快速寻找对症科室医生</text>
		</view>
		<!-- 模糊查询 -->
		<view class="flur-doctor" v-show="isshow">
			<view class="title">医生</view>
			<view class="doctor-item" v-for="(item,index) in firstList" key="index">
				<img :src="item.avatar" alt="">
				<view class="doctor-info">
					<view class="doctor-name">{{item.name}}</view>
					<view class="doctor-title">{{item.title}}</view>
					<view class="doctor-goodat">{{item.goodAt}}</view>
				</view>
			</view>
			<view class="more" @click="toDoctor"> 更多医生</view>
		</view>
	</view>

</template>

<script>
	export default{
		data(){
			return{
				name:'',
				firstList:'',
				isshow:false,
			}
		},
		methods:{
			getSearchdoctor(){
				console.log("name",this.name)
				this.isshow=true
				uni.request({
					url:'http://192.168.36.46:3000/patient/finddoctor?value='+this.name
				}).then(res=>{
					console.log("res",res.data.data)
					this.firstList=res.data.data
				})
			},
			toDoctor(){
				uni.navigateTo({
					url:'/pages/searched/serached?doctorname='+this.name
				})
			}
			
		},
	}
</script>

<style lang="scss">
	*{
		padding: 0px;
		margin: 0px;
	}
	.search-doctor{
		width: 100%;
		height: 100vh;
		background-color: #f6f7f9;
		position: relative;
		.search-doctor-input{
			width: 100%;
			height: 40px;
			padding-left: 10px;
			padding-right: 10px;
			display: flex;
			align-items: center;
			input{
				width: 80%;
				height: 40px;
				outline: none;
				border: none;
				background-color: #f0f0f2;
				border-radius: 10px;
				text-indent: 40px;
			}
			text{
				margin-left: 15px;
			}
			.icon-icon_sousuo{
				position: absolute;
				left: 10px;
				font-size: 20px;
			}
		}
		.ai{
			width: 85%;
			margin: 20px auto;
			height: 40px;
			background-color: #ebf4f3;
			border-radius: 30px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 16px;
			padding-right: 16px;
			text{
				color: #76be89;
				font-size: 14px;
			}
			.icon-jiqiren1{
				color: black;
				font-size: 20px;
				margin-right: 10px;
			}
		}
		.flur-doctor{
			width: 90%;
			// height: 300px;
			background-color: #fff;
			border-radius: 20px;
			margin: 10px auto;
			padding-left: 16px;
			padding-right: 16px;
			padding-top: 20px;
			padding-bottom: 20px;
			box-sizing: border-box;
			.title{
				font-size: 16px;
				font-weight: 700;
			}
			.doctor-item{
				display: flex;
				margin-top: 28px;
				img{
					width: 57px;
					height: 78px;
					border-radius: 10px;
					margin-right: 13px;
					
				}
				.doctor-info{
					.doctor-name{
						font-size: 16px;
						font-weight: 700;
					}
					.doctor-goodat{
						font-size: 14px;
						display: -webkit-box;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;//当属性值为3，表示超出3行隐藏
					}
					.doctor-title{
						margin-top: 16px;
						margin-bottom: 16px;
					}
				}
			}
			.more{
				margin-top: 43px;
				color: #5582b4;
			}
		}
	}
</style>